<template>
	<view :class="currentTheme">
		<a-nabbar :name="title" />
		<view class="u-padding-32">
			<item-box paddinglr="40">
				<label-box label="账号" labelWidth="140">
					<view>
						<view class="u-flex">
							<view class="u-flex-1 u-margin-right-20">
								<u-input v-model="phone" :clearable="false" border border-color="#423F4F"
									:borderColor="currentThemeObj.inputBorderColor"
									:placeholder-style="`color:${currentThemeObj.placeholderColor}`"
									:disabled="!!option.id" placeholder="请输入ID或电话" />
							</view>
							<view>
								<item-btn @click="search" v-if="!option.id" width="150" height="64">搜索</item-btn>
							</view>
						</view>
						<view class="u-font-26 text-order-time u-margin-top-15" v-if="searchUser">
							昵称：{{searchUser.nickname}}</view>
					</view>
				</label-box>
				<label-box label="成员类型" labelWidth="140">
					<select-item v-model="form.userTypeName" :list="typeList" @getSelect="getUserType"></select-item>
				</label-box>
				<label-box label="抽成设置" labelWidth="140">
					<view>
						<view class="u-flex u-margin-bottom-10">
							<view class="u-flex-1">
								<u-input v-model="form.proportion" :clearable="false" placeholder="请输入抽成比例" border
									:borderColor="currentThemeObj.inputBorderColor"
									:placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
							</view>
							<text class="u-margin-left-10 text-order-time u-font-34">%</text>
						</view>
						<text class="text-order-time ">请输入0-100</text>
					</view>
				</label-box>
			</item-box>
		</view>
		<fixed-team btnText="保存" @btnClick="save" :loading="loading"></fixed-team>
	</view>
</template>

<script>
	import uploader from '@/components/upload/upload.vue'
	import {
		getDetail,
		add,
		update
	} from '@/api/crud.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				apiModule: 'shopApi',
				apiType: 'systemStoreUser',
				phone: '',
				searchUser: '',
				form: {
					userType: '',
					proportion: '',
					userTypeName: ''
				},
				typeList: [{
					label: '店长',
					value: "DZ"
				}, {
					label: 'DM',
					value: 'DM'
				}],
				loading: false,
				option: {
					id: ''
				}
			}
		},
		computed: {
			...mapGetters(['loginForm']),
			title() {
				return this.option.id ? '编辑成员' : '添加成员'
			}
		},
		onLoad(option) {
			this.option = option;
			if (option.id) {
				getDetail('', this.apiType, this.apiModule, option.id).then(res => {
					this.form = {
						...res,
						userTypeName: ''
					};
					this.phone = res.phone;
					this.searchUser = {
						nickname: res.nickname,
						uid: res.uid
					}
					this.form.userTypeName = this.typeList.find(val => val.value == res.userType).label;
				})
			}
		},
		methods: {

			//输入手机号码查询用户
			search() {
				if (!this.phone) {
					this.$u.toast('请输入手机号')
					return false
				}
				getDetail({
					phone: this.phone
				}, 'user', this.apiModule, 'findUserByPhoneInClerk').then(res => {
					if (!res) {
						this.$u.toast('该用户不可被添加')
						return false;
					}
					this.searchUser = res;
				})
			},
			getUserType(item) {
				this.form.userType = item[0].value;
			},
			save() {
				if (!this.searchUser) {
					this.$u.toast('请搜索手机号')
					return false;
				}
				if (!this.form.userTypeName) {
					this.$u.toast('请选择成员身份')
					return false;
				}
				if (!Number(this.form.proportion)) {
					this.$u.toast('请填写抽佣设置')
					return false;
				}
				if (Number(this.form.proportion) > 100 || Number(this.form.proportion) < 0) {
					this.$u.toast('请输入0-100')
					return false;
				}
				this.loading = true
				this.form.uid = this.searchUser.uid;
				this.form.storeId = this.$store.getters.loginForm.storeId;
				const isEdit = !!this.option.id;
				const fn = isEdit ? update : add;
				fn(this.form, this.apiType, this.apiModule).then(res => {
					this.routeBack('操作成功');
					setTimeout(() => {
						this.loading = false
					}, 1500)
				}).catch(() => this.loading = false)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.save-btn {
		padding: 100rpx 0;
	}

	.form-label {
		width: 160rpx;
		font-size: 32rpx;
	}

	.btn-style {
		width: 260rpx;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
		height: 70rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		background-color: #765CFE;
		color: white;
	}

	.modal-add.btn-style {
		width: 150rpx;
		color: white;
		height: 54rpx;
		line-height: 54rpx;
		font-size: 24rpx;
	}
</style>
